<template>
  <div class="loginContainer">
    <el-button plain type="text" style="position:absolute;left:20px;top:20px;font-size:18px;" @click="back">返回</el-button>
    <div class="loginBox">
      <div class="loginTitle">系统登录{{ count }}-{{ name }}-{{ id }}</div>
      <div cLass="formBOX">
        <el-form ref="rForm" :model="loginForm" status-icon :rules="loginRules" label-width="120px"
          class="demo-ruleForm">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="loginForm.username" type="text"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="loginForm.password" type="password"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="loginBtn" @click="submitForm">登录</div>
          </el-form-item>
          <el-form-item>
            <div class="loginBtn" @click="changeState">计算</div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { ref, reactive, toRefs, defineComponent } from 'vue'
import { userStore } from '/@/store/index'
import { storeToRefs } from 'pinia'
import axios from "../utils/request"
export default defineComponent({
  setup() {
    axios({
        url: "http://127.0.0.1:3007/api/info",
        method: "get",
        data: {},
        config: {

        }
    })
    console.log(1)
    const state = reactive({
      loginForm: {
        username: "",
        password: "",
      },

      loginRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
      },
    });
    const rForm = ref();
    const methods = reactive({
      back(){
        window.history.back()
      },
      submitForm() {
        rForm.value.validate((valid: any) => {
          if (valid) {
            console.log(state.loginForm);
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      changeState() {
        // 方式一,改值
        store.count = store.count + 1
        //方式二,如果需要修改多个值使用$patch批量修改
        store.$patch({
          name: '李四',
          id: '12562256'
        })
        // 方式三,$patch一个函数
        store.$patch(store => {
          store.name = store.name + '王五'
          store.id = '13695256'
        })
        // 方式四 逻辑比较多可封装到actions
        store.logout()
      },
      resetForm() {
        rForm.value.resetFields();
      },
    });

    const store = userStore()
    // 把结构出来的数据做响应式处理
    const { count, name, id } = storeToRefs(store)
    return {
      store,
      count,
      name,
      id,
      rForm,
      ...toRefs(state),
      ...toRefs(methods),
    };
  },
});
</script>
<style lang="scss" scoped>
.loginContainer {
  background: url("../assets/svg/bg.svg");
  height: 100vh;
  width: 100vw;

  .loginBox {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0px auto;
    padding: 100px 0;

    .loginTitle {
      margin: 20px auto;
    }

    .formBOX {
      width: 100%;
    }

    .loginBtn {
      line-height: 1;
      min-height: 40px;
      white-space: nowrap;
      cursor: pointer;
      background-color: #409EFF;
      border: none;
      color: #fff;
      appearance: none;
      text-align: center;
      box-sizing: border-box;
      outline: none;
      margin: 0;
      transition: .1s;
      user-select: none;
      padding: 12px 20px;
      font-size: 14px;
      border-radius: 4px;
    }
  }
}
</style>
